<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			*{padding: 0;margin: 0;}
			li{list-style: none;}
			a{text-decoration: none;}
			input{outline: none;}
			html,body{font-size: calc(100vw/7.5);}
			@font-face {
	          font-family: 'iconfont';
	           src: url('font/iconfont.eot');
	           src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
				    url('font/iconfont.woff2') format('woff2'),
				    url('font/iconfont.woff') format('woff'),
				    url('font/iconfont.ttf') format('truetype'),
				    url('font/iconfont.svg#iconfont') format('svg'); }
           .iconfont {
			  font-family: "iconfont" !important;
			  font-size: 16px;
			  font-style: normal;
			  -webkit-font-smoothing: antialiased;
			  -moz-osx-font-smoothing: grayscale;}
			.banner{width:7.5rem;height:3.75rem;position: relative;}
			.banner img{width:7.5rem;height:3.75rem;}
			.banner .nav{position: absolute;display:flex;top:0.29rem;left:0;}
			.nav .research{width:5.9rem;height:0.6rem;background:black;border-radius:0.25rem;
			   text-align: center;line-height: 0.6rem;display: flex;justify-content: center;background:rgba(0,0,0,0.6);}
			.nav .menu{height: 0.16rem;margin-right: 0.4rem;}
			.nav .menu .icon1{display: block;font-size:0.56rem;color: white;margin-left:0.25rem;}
			.nav .research .icon2{display: block;font-size:0.36rem;color: white;}
			.nav .research input{display: block;background:none;border: none;margin-left:0.1rem;}
			.nav .research input::-webkit-input-placeholder{color:#fff;}
			.main{width:100%;}
			.main ul{width: 100%;display: flex;justify-content: space-between;flex-wrap: wrap;}
			.main ul li{width:25%;text-align: center;height: 1.85rem;}
			.main ul li img{width:0.88rem;height:0.88rem;margin-top:0.3rem;}
			.main ul li p{font-size: 0.26rem;}
			.main2{border-bottom:0.4rem solid #F5F5F5;border-top:0.4rem solid #F5F5F5;}
			.main2 ul{width: 100%;display: flex;justify-content: space-between;flex-wrap: wrap;}
			.main2 ul li{display:flex;height:0.84rem;border-bottom: 0.01rem solid #F5F5F5;
			  border-right: 0.01rem solid #F5F5F5;align-items: center;width: 33%;box-sizing: border-box;}
			.main2 ul li:nth-child(3n){border-right: none;width: 34%;}  
			.main2 ul li img{width:0.34rem;height:0.34rem;margin-left: 0.25rem;margin-right:0.21rem;}
			.main2 ul li p{font-size: 0.24rem;}
			.discount{width: 100%;}
			.discount .title{text-align: center;font-size:0.32rem;font-weight: 600;margin-top:0.38rem;margin-bottom: 0.34rem;}
		    .discount ul{display: flex;flex-wrap: wrap;justify-content: space-around;}
		    .discount ul li{/*height: 3.56rem;*/width:50%;box-sizing: border-box;margin-bottom: 0.45rem;}
		    .discount ul li:nth-child(2n-1){padding-left:4%;padding-right:2%}
		    .discount ul li:nth-child(2n){padding-left:2%;padding-right: 4%;}
		    .discount ul li img{width:100%;}
		    .discount ul li .info{font-size: 0.28rem;margin-bottom: 0.24rem;}
		    .discount ul li .price{font-size: 0.20rem;color:#a5a6a7;line-height: 0.38rem;}
		    .discount ul li .price span{color: #ff796c;}
		    .copyright{width: 100%;height: 1.39rem;color:#9ea3ab;background: #f5f5f5;font-size: 0.14rem;
		       text-align: center;overflow: hidden;padding-bottom: 1.19rem;}
		    .copyright p{margin-top: 0.25rem;}
		    .copyright p a{color:#9ea3ab;padding: 0 0.69rem;}
		    .footer{position: fixed;bottom: 0;width:100%;background: white;height: 1rem;box-shadow:0 -0.08rem 0.09rem #dadada;}
	        .footer ul{width: 100%;display: flex;}
	        .footer ul li{width: 33%;text-align: center;}
	        .footer ul li:last-child{width:34%;}
	        .footer ul li:hover{color: #00b081;}
	        @font-face {
			  font-family: 'iconfont';
			  src: url('font2/iconfont.eot');
			  src: url('font2/iconfont.eot?#iefix') format('embedded-opentype'),
			      url('font2/iconfont.woff2') format('woff2'),
			      url('font2/iconfont.woff') format('woff'),
			      url('font2/iconfont.ttf') format('truetype'),
			      url('font2/iconfont.svg#iconfont') format('svg');}
			.iconfont {
				  font-family: "iconfont" !important;
				  font-size:0.4rem;
				  font-style: normal;
				  -webkit-font-smoothing: antialiased;
				  -moz-osx-font-smoothing: grayscale;}
			.footer ul li span{display: block;margin-top: 0.08rem;margin-bottom: 0.08rem;}
			.footer ul li p{font-size: 0.25rem;}
		</style>
	</head>
	<body>
		<div class="boss">
			<div class="banner">
				<img src="img/banner.jpg"/>
				<form action="" method="post">
					<div class="nav">
						<div class="menu"><span class="iconfont icon1">&#xe655;</span></div>
						<div class="research">
							<span class="iconfont icon2">&#xe604;</span>
							<input type="text" placeholder="搜索目的地/折扣/关键字" />
						</div>
					</div>
				</form>
			</div>
			<div class="main">
				<ul>
					<li>
						<img src="img/pic.png"/>
						<p>自由行</p>
					</li>
					<li>
						<img src="img/pic.png"/>
						<p>自由行</p>
					</li>
					<li>
						<img src="img/pic.png"/>
						<p>自由行</p>
					</li>
					<li>
						<img src="img/pic.png"/>
						<p>自由行</p>
					</li>
					<li>
						<img src="img/pic.png"/>
						<p>自由行</p>
					</li>
					<li>
						<img src="img/pic.png"/>
						<p>自由行</p>
					</li>
					<li>
						<img src="img/pic.png"/>
						<p>自由行</p>
					</li>
					<li>
						<img src="img/pic.png"/>
						<p>自由行</p>
					</li>
				</ul>
			</div>
			<div class="main2">
				<ul>
					<li>
						<img src="img/list1.png"/>
						<p>门票/票券</p>
					</li>
					<li>
						<img src="img/list1.png"/>
						<p>门票/票券</p>
					</li>
					<li>
						<img src="img/list1.png"/>
						<p>门票/票券</p>
					</li>
					<li>
						<img src="img/list1.png"/>
						<p>门票/票券</p>
					</li>
					<li>
						<img src="img/list1.png"/>
						<p>门票/票券</p>
					</li>
					<li>
						<img src="img/list1.png"/>
						<p>门票/票券</p>
					</li>
				</ul>
			</div>
			<div class="discount">
				<p class="title">精选折扣</p>
				<ul>
					<li>
						<img src="img/pic1.jpg"/>
						<div class="info">[国庆]长沙直飞洛杉矶10天/13天/14天往饭含税机</div>
						<div class="price"><span>3099</span>元起</div>
					</li>
					<li>
						<img src="img/pic1.jpg"/>
						<div class="info">[国庆]长沙直飞洛杉矶10天/13天/14天往饭含税机</div>
						<div class="price"><span>3099</span>元起</div>
					</li>
					<li>
						<img src="img/pic1.jpg"/>
						<div class="info">[国庆]长沙直飞洛杉矶10天/13天/14天往饭含税机</div>
						<div class="price"><span>3099</span>元起</div>
					</li>
					<li>
						<img src="img/pic1.jpg"/>
						<div class="info">[国庆]长沙直飞洛杉矶10天/13天/14天往饭含税机</div>
						<div class="price"><span>3099</span>元起</div>
					</li>
					<li>
						<img src="img/pic1.jpg"/>
						<div class="info">[国庆]长沙直飞洛杉矶10天/13天/14天往饭含税机</div>
						<div class="price"><span>3099</span>元起</div>
					</li>
					<li>
						<img src="img/pic1.jpg"/>
						<div class="info">[国庆]长沙直飞洛杉矶10天/13天/14天往饭含税机</div>
						<div class="price"><span>3099</span>元起</div>
					</li>
				</ul>
			</div>
			<div class="copyright">
				<p>2004-2007@穷游网  qyer.com All rights reserved</p>
				<p>
					<a href="">手机版</a><a href="">电脑版</a><a href="">APP</a>
				</p>
			</div>
			<div class="footer">
				<ul>
					<li><span class="iconfont">&#xe602;</span>
						<p>首页</p>
					</li>
					<li><span class="iconfont">&#xe628;</span>
						<p>目的地</p>
					</li>
					<li><span class="iconfont">&#xe624;</span>
						<p>我的</p>
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>
